<template>
    <div class="primitive-basic">
        <h3>Primitive基础绘制</h3>
        <div class="primitive-info">
            <p><strong>说明：</strong>Primitive API是低级别API，提供高效的图形绘制能力</p>
            <p>Primitive由几何形状(Geometry)和外观(Appearance)两部分组成</p>
        </div>
        <div class="primitive-controls">
            <button @click="drawRectangle" class="draw-btn">绘制矩形</button>
            <button @click="drawEllipsoid" class="draw-btn">绘制椭球体</button>
            <button @click="drawCylinder" class="draw-btn">绘制圆柱体</button>
            <button @click="clearPrimitives" class="clear-btn">清除所有</button>
        </div>
        <div class="primitive-status">
            <p v-if="primitiveCount > 0">已绘制 {{ primitiveCount }} 个Primitive</p>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, inject, onMounted } from 'vue';
import { XbsjEarthUi } from '../../../../scripts/xbsjEarthUi';
import PrimitiveManager from './primitiveManager';

const xbsjEarthUi = inject('xbsjEarthUi') as XbsjEarthUi;
const primitiveCount = ref(0);
const primitiveManager = PrimitiveManager.getInstance();

// 获取EarthUI中的Cesium原生Viewer实例
const getCesiumViewer = () => {
    return xbsjEarthUi.activeViewer?.innerViewer?.viewer;
};

// 绘制矩形Primitive
const drawRectangle = () => {
    const viewer = getCesiumViewer() as any;
    if (!viewer) return;

    try {
        const instance = new (window as any).Cesium.GeometryInstance({
            geometry: new (window as any).Cesium.RectangleGeometry({
                rectangle: (window as any).Cesium.Rectangle.fromDegrees(118.0, 32.0, 118.2, 32.2), // 滁州附近小范围
                vertexFormat: (window as any).Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
            })
        });

        const primitive = new (window as any).Cesium.Primitive({
            geometryInstances: instance,
            appearance: new (window as any).Cesium.EllipsoidSurfaceAppearance({
                material: (window as any).Cesium.Material.fromType('Stripe')
            })
        });

        viewer.scene.primitives.add(primitive);
        primitiveManager.addPrimitive(primitive); // 添加到全局管理器
        primitiveCount.value++;
        console.log('矩形Primitive绘制成功');
    } catch (error) {
        console.error('绘制矩形失败:', error);
    }
};

// 绘制椭球体Primitive
const drawEllipsoid = () => {
    const viewer = getCesiumViewer() as any;
    if (!viewer) return;

    try {
        const ellipsoidGeometry = new (window as any).Cesium.EllipsoidGeometry({
            radii: new (window as any).Cesium.Cartesian3(300000.0, 200000.0, 150000.0),
            vertexFormat: (window as any).Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
        });

        // 中国范围内分布，避免重叠
        const cyanEllipsoidInstance = new (window as any).Cesium.GeometryInstance({
            geometry: ellipsoidGeometry,
            modelMatrix: (window as any).Cesium.Matrix4.multiplyByTranslation(
                (window as any).Cesium.Transforms.eastNorthUpToFixedFrame(
                    (window as any).Cesium.Cartesian3.fromDegrees(116.0, 40.0) // 北京
                ),
                new (window as any).Cesium.Cartesian3(0.0, 0.0, 150000.0),
                new (window as any).Cesium.Matrix4()
            ),
            attributes: {
                color: (window as any).Cesium.ColorGeometryInstanceAttribute.fromColor((window as any).Cesium.Color.CYAN)
            }
        });

        const orangeEllipsoidInstance = new (window as any).Cesium.GeometryInstance({
            geometry: ellipsoidGeometry,
            modelMatrix: (window as any).Cesium.Matrix4.multiplyByTranslation(
                (window as any).Cesium.Transforms.eastNorthUpToFixedFrame(
                    (window as any).Cesium.Cartesian3.fromDegrees(121.0, 31.0) // 上海
                ),
                new (window as any).Cesium.Cartesian3(0.0, 0.0, 450000.0),
                new (window as any).Cesium.Matrix4()
            ),
            attributes: {
                color: (window as any).Cesium.ColorGeometryInstanceAttribute.fromColor((window as any).Cesium.Color.ORANGE)
            }
        });

        const primitive = new (window as any).Cesium.Primitive({
            geometryInstances: [cyanEllipsoidInstance, orangeEllipsoidInstance],
            appearance: new (window as any).Cesium.PerInstanceColorAppearance({
                translucent: false,
                closed: true
            })
        });

        viewer.scene.primitives.add(primitive);
        primitiveManager.addPrimitive(primitive); // 添加到全局管理器
        primitiveCount.value++;
        console.log('椭球体Primitive绘制成功');
    } catch (error) {
        console.error('绘制椭球体失败:', error);
    }
};

// 绘制圆柱体Primitive
const drawCylinder = () => {
    const viewer = getCesiumViewer() as any;
    if (!viewer) return;

    try {
        const cylinderGeometry = new (window as any).Cesium.CylinderGeometry({
            length: 400000.0,
            topRadius: 200000.0,
            bottomRadius: 200000.0,
            vertexFormat: (window as any).Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
        });

        // 中国范围内分布，避免重叠
        const cylinderInstance = new (window as any).Cesium.GeometryInstance({
            geometry: cylinderGeometry,
            modelMatrix: (window as any).Cesium.Matrix4.multiplyByTranslation(
                (window as any).Cesium.Transforms.eastNorthUpToFixedFrame(
                    (window as any).Cesium.Cartesian3.fromDegrees(113.0, 23.0) // 广州
                ),
                new (window as any).Cesium.Cartesian3(0.0, 0.0, 200000.0),
                new (window as any).Cesium.Matrix4()
            ),
            attributes: {
                color: (window as any).Cesium.ColorGeometryInstanceAttribute.fromColor((window as any).Cesium.Color.RED)
            }
        });

        const primitive = new (window as any).Cesium.Primitive({
            geometryInstances: cylinderInstance,
            appearance: new (window as any).Cesium.PerInstanceColorAppearance({
                translucent: false,
                closed: true
            })
        });

        viewer.scene.primitives.add(primitive);
        primitiveManager.addPrimitive(primitive); // 添加到全局管理器
        primitiveCount.value++;
        console.log('圆柱体Primitive绘制成功');
    } catch (error) {
        console.error('绘制圆柱体失败:', error);
    }
};

// 清除所有Primitive
const clearPrimitives = () => {
    const viewer = getCesiumViewer() as any;
    if (!viewer) return;

    try {
        // 只清除全局管理器中的Primitive
        primitiveManager.clearAllPrimitives(viewer);
        primitiveCount.value = 0;
        console.log('Primitive基础绘制已清除');
    } catch (error) {
        console.error('清除Primitive失败:', error);
    }
};

onMounted(() => {
    // 组件加载时检查现有Primitive数量
    const viewer = getCesiumViewer() as any;
    if (viewer) {
        primitiveCount.value = viewer.scene.primitives.length;
    }
});
</script>

<style scoped>
.primitive-basic {
    width: 280px;
    box-sizing: border-box;
    padding: 10px;
}

.primitive-info {
    box-sizing: border-box;
    font-size: 14px;
    padding: 10px;
    background-color: #000000;
    border-radius: 4px;
    margin-bottom: 15px;
}

.primitive-controls {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.draw-btn, .clear-btn {
    margin-bottom: 8px;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.draw-btn {
    background-color: #2196F3;
    color: white;
}

.draw-btn:hover {
    background-color: #1976D2;
}

.clear-btn {
    background-color: #f44336;
    color: white;
}

.clear-btn:hover {
    background-color: #d32f2f;
}

.primitive-status {
    padding: 10px;
    background-color: #000000;
    border-radius: 4px;
    border-left: 4px solid #2196F3;
    color: #2196F3;
    font-weight: bold;
}
</style>
